import React from 'react';
import './footer.scss';
import { Link } from 'react-router';
import $ from 'jquery';
const Footer = React.createClass({
    componentDidMount() {
        this.update();
    },
    componentWillReceiveProps(nextProps) {
        $('footer a').removeClass('current');
        this.update(nextProps.pathName);
    },
    update(pathName) {
        pathName = pathName || this.props.pathName;
        if (pathName) {
            $('footer a').removeClass('current');
            $('footer').find('a').each(function () {
                let patterns = $(this).attr('data-patterns');
                if (patterns && patterns.length > 0) {
                    patterns = patterns.split(',');
                }
                if (patterns && patterns.length > 0) {
                    for (let j = 0; j < patterns.length; j++) {
                        let pattern = patterns[j];
                        if (pathName.indexOf(pattern) === 0) {
                            $(this).addClass('current');
                            return true;
                        }
                    }
                }
            });
        }
    },
    render() {
        return (
            <footer id="footer" className="flex">
                <Link className="flex-g-1 flex-col-vcenter" data-permission="MODEL_FLOW_SUMMARY" to={"flowSummary/" + this.props.shopId} data-patterns="flowSummary">
                    <i className="bar_icon_1"></i>
                    <span>总客流</span>
                </Link>
                <Link className="flex-g-1 flex-col-vcenter" data-permission="MODEL_FLOW_FLOOR" to={"floors/" + this.props.shopId} data-patterns="floors">
                    <i className="bar_icon_2"></i>
                    <span>楼层分析</span>
                </Link>
                <Link className="flex-g-1 flex-col-vcenter" data-permission="MODEL_FLOW_SUMMARY" to={"retailPatterns/" + this.props.shopId} data-patterns="retailPatterns">
                    <i className="bar_icon_3"></i>
                    <span>业态分析</span>
                </Link>
                <Link className="flex-g-1 flex-col-vcenter" data-permission="MODEL_FLOW_PATTERN" to={"brand/" + this.props.shopId} data-patterns="brand">
                    <i className="bar_icon_4"></i>
                    <span>品牌分析</span>
                </Link>
            </footer>
        );
    }
})

module.exports = Footer;
